<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>华为官网 - 构建万物互联的智能世界</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind自定义主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            huawei: {
              blue: '#165DFF',
              dark: '#0F172A',
              light: '#F1F5F9',
              gray: '#64748B'
            }
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .transition-transform {
        transition-property: transform;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 300ms;
      }
    }
  </style>
  
  <style>
    /* 基础动画效果 */
    .slide-in {
      animation: slideIn 0.5s ease forwards;
    }
    
    @keyframes slideIn {
      from {
        transform: translateY(20px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    
    /* 轮播图动画 */
    .carousel-item {
      display: none;
      animation: fadeIn 1s ease;
    }
    
    .carousel-item.active {
      display: block;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
  </style>
</head>

<body class="font-sans bg-white text-huawei-dark">
  <!-- 导航栏 -->
  <header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/90 backdrop-blur-sm shadow-sm">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between h-16 md:h-20">
        <!-- 品牌Logo -->
        <a href="#" class="flex items-center space-x-2">
          <div class="w-10 h-10 bg-huawei-blue rounded flex items-center justify-center">
            <span class="text-white font-bold text-xl">H</span>
          </div>
          <span class="text-xl font-bold text-huawei-blue hidden sm:block">华为</span>
        </a>
        
        <!-- 桌面端导航 -->
        <nav class="hidden md:flex items-center space-x-8">
          <a href="#products" class="text-huawei-dark hover:text-huawei-blue transition-colors">产品</a>
          <a href="#services" class="text-huawei-dark hover:text-huawei-blue transition-colors">服务</a>
          <a href="#about" class="text-huawei-dark hover:text-huawei-blue transition-colors">关于我们</a>
          <a href="#support" class="text-huawei-dark hover:text-huawei-blue transition-colors">支持</a>
        </nav>
        
        <!-- 搜索和购物车 -->
        <div class="flex items-center space-x-4">
          <button class="text-huawei-dark hover:text-huawei-blue transition-colors">
            <i class="fa fa-search text-lg"></i>
          </button>
          <button class="text-huawei-dark hover:text-huawei-blue transition-colors">
            <i class="fa fa-shopping-cart text-lg"></i>
          </button>
          
          <!-- 移动端菜单按钮 -->
          <button id="menuBtn" class="md:hidden text-huawei-dark hover:text-huawei-blue transition-colors">
            <i class="fa fa-bars text-xl"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 移动端导航菜单 -->
    <div id="mobileMenu" class="hidden md:hidden bg-white border-t">
      <div class="container mx-auto px-4 py-3 space-y-3">
        <a href="#products" class="block py-2 text-huawei-dark hover:text-huawei-blue transition-colors">产品</a>
        <a href="#services" class="block py-2 text-huawei-dark hover:text-huawei-blue transition-colors">服务</a>
        <a href="#about" class="block py-2 text-huawei-dark hover:text-huawei-blue transition-colors">关于我们</a>
        <a href="#support" class="block py-2 text-huawei-dark hover:text-huawei-blue transition-colors">支持</a>
      </div>
    </div>
  </header>

  <main>
    <!-- 英雄区轮播 -->
    <section class="pt-16 md:pt-20">
      <div id="carousel" class="relative h-[60vh] min-h-[400px] overflow-hidden">
        <!-- 轮播项1 -->
        <div class="carousel-item active relative h-full">
          <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent z-10"></div>
          <img src="https://picsum.photos/id/1/1920/1080" alt="华为手机" class="absolute w-full h-full object-cover">
          <div class="container mx-auto px-4 h-full flex items-center relative z-20">
            <div class="max-w-lg slide-in">
              <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-white leading-tight text-shadow mb-4">
                华为Mate系列<br>重新定义高端
              </h1>
              <p class="text-[clamp(1rem,2vw,1.25rem)] text-white/90 mb-8 max-w-md">
                搭载最新麒麟芯片，卓越摄影体验，开启智慧生活新方式
              </p>
              <div class="flex flex-wrap gap-4">
                <a href="#" class="px-6 py-3 bg-huawei-blue text-white rounded-md hover:bg-huawei-blue/90 transition-colors">
                  了解更多
                </a>
                <a href="#" class="px-6 py-3 bg-white/20 backdrop-blur-sm text-white rounded-md border border-white/30 hover:bg-white/30 transition-colors">
                  立即购买
                </a>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 轮播项2 -->
        <div class="carousel-item relative h-full">
          <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent z-10"></div>
          <img src="https://picsum.photos/id/160/1920/1080" alt="华为笔记本" class="absolute w-full h-full object-cover">
          <div class="container mx-auto px-4 h-full flex items-center relative z-20">
            <div class="max-w-lg slide-in">
              <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-white leading-tight text-shadow mb-4">
                华为笔记本<br>智慧协同新体验
              </h1>
              <p class="text-[clamp(1rem,2vw,1.25rem)] text-white/90 mb-8 max-w-md">
                轻薄设计，强劲性能，多设备协同，提升工作效率
              </p>
              <div class="flex flex-wrap gap-4">
                <a href="#" class="px-6 py-3 bg-huawei-blue text-white rounded-md hover:bg-huawei-blue/90 transition-colors">
                  了解更多
                </a>
                <a href="#" class="px-6 py-3 bg-white/20 backdrop-blur-sm text-white rounded-md border border-white/30 hover:bg-white/30 transition-colors">
                  立即购买
                </a>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 轮播控制按钮 -->
        <button id="prevBtn" class="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/20 backdrop-blur-sm text-white flex items-center justify-center z-30 hover:bg-white/30 transition-colors">
          <i class="fa fa-chevron-left"></i>
        </button>
        <button id="nextBtn" class="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/20 backdrop-blur-sm text-white flex items-center justify-center z-30 hover:bg-white/30 transition-colors">
          <i class="fa fa-chevron-right"></i>
        </button>
        
        <!-- 轮播指示器 -->
        <div class="absolute bottom-6 left-1/2 -translate-x-1/2 flex space-x-2 z-30">
          <button class="w-3 h-3 rounded-full bg-white opacity-100 carousel-indicator active"></button>
          <button class="w-3 h-3 rounded-full bg-white opacity-50 carousel-indicator"></button>
        </div>
      </div>
    </section>
    
    <!-- 产品展示区 -->
    <section id="products" class="py-16 bg-huawei-light/50">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">热门产品</h2>
          <p class="text-huawei-gray max-w-2xl mx-auto">探索华为全系列产品，体验科技带来的美好生活</p>
        </div>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          <!-- 产品卡片1 -->
          <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
            <div class="h-48 overflow-hidden">
              <img src="https://picsum.photos/id/96/800/600" alt="智能手机" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
            </div>
            <div class="p-4">
              <h3 class="font-semibold text-lg mb-2">智能手机</h3>
              <p class="text-huawei-gray text-sm mb-4">Mate系列 | P系列 | Nova系列</p>
              <a href="#" class="text-huawei-blue text-sm flex items-center hover:underline">
                查看全部 <i class="fa fa-arrow-right ml-1 text-xs"></i>
              </a>
            </div>
          </div>
          
          <!-- 产品卡片2 -->
          <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
            <div class="h-48 overflow-hidden">
              <img src="https://picsum.photos/id/48/800/600" alt="笔记本电脑" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
            </div>
            <div class="p-4">
              <h3 class="font-semibold text-lg mb-2">笔记本电脑</h3>
              <p class="text-huawei-gray text-sm mb-4">MateBook X Pro | 荣耀MagicBook</p>
              <a href="#" class="text-huawei-blue text-sm flex items-center hover:underline">
                查看全部 <i class="fa fa-arrow-right ml-1 text-xs"></i>
              </a>
            </div>
          </div>
          
          <!-- 产品卡片3 -->
          <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
            <div class="h-48 overflow-hidden">
              <img src="https://picsum.photos/id/119/800/600" alt="平板电脑" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
            </div>
            <div class="p-4">
              <h3 class="font-semibold text-lg mb-2">平板电脑</h3>
              <p class="text-huawei-gray text-sm mb-4">MatePad Pro | 畅享平板</p>
              <a href="#" class="text-huawei-blue text-sm flex items-center hover:underline">
                查看全部 <i class="fa fa-arrow-right ml-1 text-xs"></i>
              </a>
            </div>
          </div>
          
          <!-- 产品卡片4 -->
          <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
            <div class="h-48 overflow-hidden">
              <img src="https://picsum.photos/id/180/800/600" alt="智能穿戴" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
            </div>
            <div class="p-4">
              <h3 class="font-semibold text-lg mb-2">智能穿戴</h3>
              <p class="text-huawei-gray text-sm mb-4">Watch GT | 手环 | 耳机</p>
              <a href="#" class="text-huawei-blue text-sm flex items-center hover:underline">
                查看全部 <i class="fa fa-arrow-right ml-1 text-xs"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 特色服务 -->
    <section id="services" class="py-16">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">华为服务</h2>
          <p class="text-huawei-gray max-w-2xl mx-auto">全方位服务支持，为您带来无忧体验</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <!-- 服务项1 -->
          <div class="text-center p-6 rounded-lg hover:bg-huawei-light/30 transition-colors">
            <div class="w-16 h-16 bg-huawei-blue/10 rounded-full flex items-center justify-center mx-auto mb-4">
              <i class="fa fa-truck text-2xl text-huawei-blue"></i>
            </div>
            <h3 class="font-semibold text-lg mb-2">快速配送</h3>
            <p class="text-huawei-gray">全国范围内24小时送达，部分城市支持当日达服务</p>
          </div>
          
          <!-- 服务项2 -->
          <div class="text-center p-6 rounded-lg hover:bg-huawei-light/30 transition-colors">
            <div class="w-16 h-16 bg-huawei-blue/10 rounded-full flex items-center justify-center mx-auto mb-4">
              <i class="fa fa-headphones text-2xl text-huawei-blue"></i>
            </div>
            <h3 class="font-semibold text-lg mb-2">7×24小时客服</h3>
            <p class="text-huawei-gray">专业客服团队随时为您解答疑问，提供技术支持</p>
          </div>
          
          <!-- 服务项3 -->
          <div class="text-center p-6 rounded-lg hover:bg-huawei-light/30 transition-colors">
            <div class="w-16 h-16 bg-huawei-blue/10 rounded-full flex items-center justify-center mx-auto mb-4">
              <i class="fa fa-shield text-2xl text-huawei-blue"></i>
            </div>
            <h3 class="font-semibold text-lg mb-2">两年质保</h3>
            <p class="text-huawei-gray">大部分产品享受两年官方质保服务，让您使用更放心</p>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 关于我们 -->
    <section id="about" class="py-16 bg-huawei-dark text-white">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div>
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-6">构建万物互联的智能世界</h2>
            <p class="mb-4 text-white/80 leading-relaxed">
              华为创立于1987年，是全球领先的ICT（信息与通信）基础设施和智能终端提供商。我们致力于把数字世界带入每个人、每个家庭、每个组织，构建万物互联的智能世界。
            </p>
            <p class="mb-6 text-white/80 leading-relaxed">
              目前华为约有19.7万员工，业务遍及170多个国家和地区，服务全球30多亿人口。
            </p>
            <a href="#" class="inline-block px-6 py-3 bg-huawei-blue text-white rounded-md hover:bg-huawei-blue/90 transition-colors">
              了解更多华为故事
            </a>
          </div>
          <div class="grid grid-cols-2 gap-4">
            <img src="https://picsum.photos/id/3/600/800" alt="华为办公环境" class="rounded-lg shadow-lg h-64 object-cover">
            <img src="https://picsum.photos/id/20/600/800" alt="华为研发中心" class="rounded-lg shadow-lg h-80 mt-8 object-cover">
          </div>
        </div>
      </div>
    </section>
    
    <!-- 支持与联系 -->
    <section id="support" class="py-16">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">获取支持</h2>
          <p class="text-huawei-gray max-w-2xl mx-auto">我们随时为您提供帮助和支持</p>
        </div>
        
        <div class="max-w-3xl mx-auto">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10">
            <div class="bg-huawei-light/50 p-6 rounded-lg text-center">
              <div class="text-huawei-blue text-4xl font-bold mb-2">950800</div>
              <p class="text-huawei-gray">华为消费者服务热线</p>
            </div>
            <div class="bg-huawei-light/50 p-6 rounded-lg text-center">
              <div class="text-huawei-blue text-4xl font-bold mb-2">
                <i class="fa fa-weixin"></i>
              </div>
              <p class="text-huawei-gray">关注华为官方微信</p>
            </div>
          </div>
          
          <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
            <h3 class="font-semibold text-lg mb-4">常见问题</h3>
            <div class="space-y-4">
              <div class="border-b border-gray-100 pb-4">
                <button class="flex justify-between items-center w-full text-left font-medium">
                  <span>如何查询产品保修期？</span>
                  <i class="fa fa-chevron-down text-huawei-gray transition-transform"></i>
                </button>
              </div>
              <div class="border-b border-gray-100 pb-4">
                <button class="flex justify-between items-center w-full text-left font-medium">
                  <span>如何申请售后服务？</span>
                  <i class="fa fa-chevron-down text-huawei-gray transition-transform"></i>
                </button>
              </div>
              <div class="border-b border-gray-100 pb-4">
                <button class="flex justify-between items-center w-full text-left font-medium">
                  <span>产品固件如何升级？</span>
                  <i class="fa fa-chevron-down text-huawei-gray transition-transform"></i>
                </button>
              </div>
              <div>
                <button class="flex justify-between items-center w-full text-left font-medium">
                  <span>如何辨别产品真伪？</span>
                  <i class="fa fa-chevron-down text-huawei-gray transition-transform"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 订阅区域 -->
    <section class="py-16 bg-huawei-blue text-white">
      <div class="container mx-auto px-4 text-center">
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-4">订阅华为资讯</h2>
        <p class="max-w-2xl mx-auto mb-8 text-white/80">第一时间获取产品发布、促销活动等最新资讯</p>
        
        <form class="max-w-md mx-auto flex flex-col sm:flex-row gap-2">
          <input type="email" placeholder="请输入您的邮箱地址" class="flex-1 px-4 py-3 rounded-md text-huawei-dark focus:outline-none focus:ring-2 focus:ring-white">
          <button type="submit" class="px-6 py-3 bg-white text-huawei-blue font-medium rounded-md hover:bg-huawei-light transition-colors">
            立即订阅
          </button>
        </form>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-huawei-dark text-white/70 py-12">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
        <div>
          <h4 class="text-white font-semibold mb-4">关于华为</h4>
          <ul class="space-y-2">
            <li><a href="#" class="hover:text-white transition-colors">公司简介</a></li>
            <li><a href="#" class="hover:text-white transition-colors">新闻中心</a></li>
            <li><a href="#" class="hover:text-white transition-colors">投资者关系</a></li>
            <li><a href="#" class="hover:text-white transition-colors">可持续发展</a></li>
          </ul>
        </div>
        <div>
          <h4 class="text-white font-semibold mb-4">产品与服务</h4>
          <ul class="space-y-2">
            <li><a href="#" class="hover:text-white transition-colors">手机</a></li>
            <li><a href="#" class="hover:text-white transition-colors">笔记本</a></li>
            <li><a href="#" class="hover:text-white transition-colors">平板</a></li>
            <li><a href="#" class="hover:text-white transition-colors">智能家居</a></li>
          </ul>
        </div>
        <div>
          <h4 class="text-white font-semibold mb-4">服务支持</h4>
          <ul class="space-y-2">
            <li><a href="#" class="hover:text-white transition-colors">服务中心</a></li>
            <li><a href="#" class="hover:text-white transition-colors">维修配件价格</a></li>
            <li><a href="#" class="hover:text-white transition-colors">软件下载</a></li>
            <li><a href="#" class="hover:text-white transition-colors">常见问题</a></li>
          </ul>
        </div>
        <div>
          <h4 class="text-white font-semibold mb-4">关注我们</h4>
          <div class="flex space-x-4 mb-4">
            <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-huawei-blue transition-colors">
              <i class="fa fa-weibo"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-huawei-blue transition-colors">
              <i class="fa fa-weixin"></i>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-huawei-blue transition-colors">
              <i class="fa fa-youtube-play"></i>
            </a>
          </div>
          <p>客服热线：950800</p>
        </div>
      </div>
      
      <div class="border-t border-white/10 pt-8 text-sm text-center">
        <p>© 2023 华为技术有限公司 版权所有</p>
        <p class="mt-2">京ICP备19004913号-3</p>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 50) {
        navbar.classList.add('shadow-md');
        navbar.classList.remove('shadow-sm');
      } else {
        navbar.classList.remove('shadow-md');
        navbar.classList.add('shadow-sm');
      }
    });
    
    // 移动端菜单切换
    const menuBtn = document.getElementById('menuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    
    menuBtn.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
      const icon = menuBtn.querySelector('i');
      if (icon.classList.contains('fa-bars')) {
        icon.classList.replace('fa-bars', 'fa-times');
      } else {
        icon.classList.replace('fa-times', 'fa-bars');
      }
    });
    
    // 轮播图功能
    const carouselItems = document.querySelectorAll('.carousel-item');
    const indicators = document.querySelectorAll('.carousel-indicator');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    let currentIndex = 0;
    let carouselInterval;
    
    // 初始化轮播
    function initCarousel() {
      showSlide(currentIndex);
      startCarousel();
    }
    
    // 显示指定轮播项
    function showSlide(index) {
      // 隐藏所有轮播项
      carouselItems.forEach(item => item.classList.remove('active'));
      indicators.forEach(ind => ind.classList.remove('active', 'opacity-100'));
      indicators.forEach(ind => ind.classList.add('opacity-50'));
      
      // 显示当前轮播项
      carouselItems[index].classList.add('active');
      indicators[index].classList.add('active', 'opacity-100');
      indicators[index].classList.remove('opacity-50');
    }
    
    // 下一张轮播
    function nextSlide() {
      currentIndex = (currentIndex + 1) % carouselItems.length;
      showSlide(currentIndex);
    }
    
    // 上一张轮播
    function prevSlide() {
      currentIndex = (currentIndex - 1 + carouselItems.length) % carouselItems.length;
      showSlide(currentIndex);
    }
    
    // 开始自动轮播
    function startCarousel() {
      carouselInterval = setInterval(nextSlide, 5000);
    }
    
    // 停止自动轮播
    function stopCarousel() {
      clearInterval(carouselInterval);
    }
    
    // 轮播控制事件
    prevBtn.addEventListener('click', () => {
      stopCarousel();
      prevSlide();
      startCarousel();
    });
    
    nextBtn.addEventListener('click', () => {
      stopCarousel();
      nextSlide();
      startCarousel();
    });
    
    // 指示器点击事件
    indicators.forEach((indicator, index) => {
      indicator.addEventListener('click', () => {
        stopCarousel();
        currentIndex = index;
        showSlide(currentIndex);
        startCarousel();
      });
    });
    
    // 鼠标悬停暂停轮播
    const carousel = document.getElementById('carousel');
    carousel.addEventListener('mouseenter', stopCarousel);
    carousel.addEventListener('mouseleave', startCarousel);
    
    // 初始化页面
    window.addEventListener('DOMContentLoaded', () => {
      initCarousel();
      
      // 平滑滚动
      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
          e.preventDefault();
          const targetId = this.getAttribute('href');
          if (targetId === '#') return;
          
          const targetElement = document.querySelector(targetId);
          if (targetElement) {
            // 关闭移动菜单（如果打开）
            if (!mobileMenu.classList.contains('hidden')) {
              mobileMenu.classList.add('hidden');
              const icon = menuBtn.querySelector('i');
              icon.classList.replace('fa-times', 'fa-bars');
            }
            
            // 滚动到目标位置
            window.scrollTo({
              top: targetElement.offsetTop - 80,
              behavior: 'smooth'
            });
          }
        });
      });
    });
  </script>
</body>
</html>